// 获取按钮DOM对象
const insert = document.querySelector('.insert')
const cancel = document.querySelectorAll('.cancel')
const add = document.querySelector('.add')
const update = document.querySelector('.update')
const deletes = document.querySelector('.delete')
// 框DOM对象
const insertShow = document.querySelector('.insertShow')
const updateShow = document.querySelector('.updateShow')
// 获取输入框DOM对象
const inputs = document.querySelectorAll('.insertShow input')
const inputsUpdate = document.querySelectorAll('.updateShow input')
const paged = document.querySelector('.paged')
// 页码总数DOM对象
const pageSum = document.querySelector('.controlTable select')
// 插入列表内容DOM对象
const innerHTMLs = document.querySelector('.list')
// 控件栏DOM对象
const first = document.querySelector('.first')
const last = document.querySelector('.last')
const next = document.querySelector('.next')
const theLast = document.querySelector('.theLast')

// 页码
let page = 1
let pageNumber = 5
// 记录最大页数
let maxPage = 0
// 记录更新前的院系号
let oldFacultiesId
// 记录当前页数据行数量
let trNumber
// 正则表达式
const idReg = /^\d{3}$/
const phoneReg = /^\d{11}$/

// 点击添加弹出插入框
insert.addEventListener('click', () => {
  insertShow.style.display = 'block'
})

function close(element) {
  return () => {
    inputs[0].value = inputs[1].value = inputs[2].value = inputs[3].value = ''
    element.style.display = 'none'
  }
}

// 关闭插入框
cancel[0].addEventListener('click', close(insertShow))

cancel[1].addEventListener('click', close(updateShow))

// 获取数据
function showAllEssay(page, pageNumber) {
  axios({
    url: 'http://127.0.0.1:8080/Root/Faculties/pageShow',
    params: {
      page,
      pageNumber
    }
  }).then(result => {
    const resultData = result.data.data
    trNumber = resultData.length
    showResult(resultData)
  }).catch(() => {

  })
}

showAllEssay(page, pageNumber)    //数据初始化

function showResult(result) {
  const htmlStr = result.map((e, key) => {
    return `
    <tr data-id="${key}">
      <td>${e.id}</td>
      <td>${e.name}</td>
      <td>${e.studentSum}</td>
      <td>${e.teacherSum}</td>
      <td>${e.headOfDepartment}</td>
      <td>${e.phone}</td>
      <td>${e.createDate}</td>
      <td>
        <button class="update" data-id="${key}">修改</button>
        <button class="delete" data-id="${key}">删除</button>
      </td>
    </tr>
    `
  }).join('')
  innerHTMLs.innerHTML = htmlStr
}

// 输入框监听
paged.addEventListener('change', () => {
  page = paged.value || 1
  pageNumber = pageSum.value
  showAllEssay(page, pageNumber)
})

// 增加数据
add.addEventListener('click', () => {
  const id = inputs[0].value
  const name = inputs[1].value
  const headOfDepartment = inputs[2].value
  const phone = inputs[3].value
  if (!id || !name || !headOfDepartment || !phone) {
    alert('内容不能为空')
    return
  } else if (!idReg.test(id) || name.length > 15 || headOfDepartment.length > 10 || !phoneReg.test(phone)) {
    alert('内容不符合规范')
    return
  }
  axios({
    url: 'http://127.0.0.1:8080/Root/Faculties/addNewFaculties',
    method: 'POST',
    data: {
      id,
      name,
      headOfDepartment,
      phone
    }
  }).then(() => {
    (close(insertShow))()
    showAllEssay(page, pageNumber)
    alert('添加成功')
  }).catch(() => {
    alert('添加失败')
  })
})

// 打开更新弹窗自动填入信息
innerHTMLs.addEventListener('click', (e) => {
  const element = e.target
  if (!element.classList.contains('update')) {
    return
  }
  // 获取数据项的DOM对象
  const tdInformation = document.querySelectorAll(`.list tr[data-id="${element.dataset.id}"] td`)
  updateShow.style.display = 'block'
  oldFacultiesId = inputsUpdate[0].value = tdInformation[0].innerHTML
  inputsUpdate[1].value = tdInformation[1].innerHTML
  inputsUpdate[2].value = tdInformation[4].innerHTML
  inputsUpdate[3].value = tdInformation[5].innerHTML
})

// 更新信息
update.addEventListener('click', () => {
  const id = inputsUpdate[0].value
  const name = inputsUpdate[1].value
  const headOfDepartment = inputsUpdate[2].value
  const phone = inputsUpdate[3].value
  axios({
    url: 'http://127.0.0.1:8080/Root/Faculties/updateFaculties?oldFacultiesId=' + oldFacultiesId,
    method: 'PUT',
    data: {
      id,
      name,
      headOfDepartment,
      phone
    }
  }).then(() => {
    (close(updateShow))()
    showAllEssay(page, pageNumber)
    alert('更新成功')
  }).catch(() => {
    alert('信息更新失败')
  })
})

// 删除信息
innerHTMLs.addEventListener('click', (e) => {
  const element = e.target
  if (!element.classList.contains('delete')) {
    return
  }
  const deleteId = document.querySelector(`.list tr[data-id="${element.dataset.id}"] td:nth-child(1)`).innerHTML
  const isDelete = confirm(`确认删除院系号为${deleteId}的信息?`)
  if (!isDelete) {
    return
  }
  axios({
    url: 'http://127.0.0.1:8080/Root/Faculties/deleteInformation',
    method: 'PUT',
    params: {
      deleteId
    }
  }).then(() => {
    showAllEssay(page, pageNumber)
  }).catch(() => {
    alert('删除失败')
  })
})

// 获取表格页数
function getPage() {
  axios({
    url: 'http://127.0.0.1:8080/Root/Faculties/allPage',
    params: {
      pageNumber
    }
  }).then(result => {
    maxPage = result.data.data
  })
}

// 表格空间监听
first.addEventListener('click', () => {
  page = 1
  showAllEssay(page, pageNumber)
})

last.addEventListener('click', () => {
  if (page > 1) {
    showAllEssay(--page, pageNumber)
  }
})

next.addEventListener('click', () => {
  getPage()
  if (page < maxPage) {
    showAllEssay(++page, pageNumber)
  }
})

theLast.addEventListener('click', () => {
  page = maxPage
  showAllEssay(page, pageNumber)
})

pageSum.addEventListener('change', () => {
  pageNumber = pageSum.value
  page = 1
  showAllEssay(page, pageNumber)
})

paged.addEventListener('change', () => {
  page = paged.value
  // 限定page范围
  page = page > maxPage ? maxPage : page
  page = page < 1 ? 1 : page
  showAllEssay(page, pageNumber)
})